<template>
  <div v-html="showHtml" class="rich-text"></div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import axios from '@/request/http'
interface Props {
  // 文件编号
  wjbh: string
  // 下载富文本接口
  apiXzzfc?: string
}
const props = withDefaults(defineProps<Props>(), {
  apiXzzfc: '/wjfw/xzzfc',
})
/* 显示富文本内容 */
// 显示的富文本内容
const showHtml = ref('')
// 通过wjbh调用接口下载
const getWjnr = () => {
  if (!props.wjbh) {
    console.log('请传入富文本文件关联文件编号')
    return
  }
  const loading = ElLoading.service({ text: '获取内容中，请稍后...' })
  axios
    .post(props.apiXzzfc, { wjbh: props.wjbh })
    .then((res: any) => {
      showHtml.value = res?.data || ''
    })
    .catch((error) => {
      error.isError && ElMessage.error(`下载内容失败：${error.message}`)
    })
    .finally(() => {
      loading.close()
    })
}
watch(
  () => props.wjbh,
  () => {
    getWjnr()
  },
  { immediate: true },
)
</script>

<style lang="scss">
.rich-text {
  padding: 0 16px;
  font-size: 16px;
  video {
    max-width: 100% !important;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  a {
    text-decoration: none;
  }
  p {
    line-height: 1.6;
    margin: 0px;
  }
  table {
    word-wrap: break-word;
    word-break: break-all;
    max-width: 100%;
    border: none;
    border-color: #999;
  }
  .mce-object-iframe {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  ul,
  ol {
    list-style-position: inside;
  }
}
</style>
